<template>
  <div>
    <!-- 全局组件 -->
    <Category></Category>
    <!-- SPU属性列表 -->
    <el-card
      shadow="always"
      :body-style="{ padding: '20px' }"
      style="margin: 20px 0"
    >
      <!-- 场景零:SPU列表页面 -->
      <div v-show="scene == 0">
        <el-button
          type="primary"
          size="default"
          :icon="Plus"
          :disabled="!categoryStore.c3Id"
          @click="addSpu"
          >添加SPU</el-button
        >
        <!-- 表格 -->
        <el-table border stripe style="margin: 20px 0" :data="spuList.records">
          <el-table-column label="序号" type="index" align="center" width="80">
          </el-table-column>
          <el-table-column label="SPU名称" prop="spuName"> </el-table-column>
          <el-table-column label="SPU描述" prop="description">
          </el-table-column>
          <el-table-column label="操作">
            <template #="{ row, $index }">
              <el-button
                type="primary"
                size="small"
                :icon="Plus"
                title="添加SPU"
                @click="addSku(row)"
              ></el-button>
              <el-button
                type="warning"
                size="small"
                :icon="Edit"
                title="修改SPU"
                @click="updateSpu(row)"
              ></el-button>
              <el-button
                type="info"
                size="small"
                :icon="InfoFilled"
                title="查看SKU"
              ></el-button>
              <el-button
                type="danger"
                size="small"
                :icon="Delete"
                title="删除SPU"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          @current-change="getSpuList"
          @size-change="sizeChangeHandler"
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[3, 5, 7]"
          layout="prev, pager, next, jumper,->,sizes,total, "
          :total="spuList.total"
          background
          :pager-count="7"
        >
        </el-pagination>
      </div>
      <!-- 场景一:添加和修改SPU的页面 -->
      <!-- 使用$ref实现父子组件通信 -->
      <Spu
        v-show="scene == 1"
        @changeScene="changeSceneHandler"
        ref="spuRef"
      ></Spu>
      <!-- 场景二:添加SKU的页面 -->
      <Sku v-show="scene == 2" ref="skuRef"></Sku>
    </el-card>
  </div>
</template>

<script setup lang="ts">
// 引入elemen-plus中的一些图标组件
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  Plus,
  InfoFilled,
} from "@element-plus/icons-vue";
// 从vue中引入响应式API
import { ref, watch } from "vue";
// 引入仓库
import useCategoryStore from "@/stores/category";
// 引入接口
import { reqSpuList } from "@/api/product/spu/spu";
// 引入子组件
import Spu from "./addOrUpdateSpu.vue";
import Sku from "./addSku.vue";
// 定义仓库的方法
let categoryStore = useCategoryStore();

// 当前页码
let currentPage = ref<number>(1);
// 一页展示几条数据
let pageSize = ref<number>(3);

// 存储服务器返回的spu列表数据
let spuList = ref([]);

// 定义切换场景的数据
let scene = ref<number>(0);

// 存储子组件实例对象
let spuRef = ref<any>();
let skuRef = ref<any>()

// 监听三级分类的id发生变化时,发送请求,获取SPU列表数据
watch(
  () => categoryStore.c3Id,
  () => {
    // 三级分类的id不能为空
    if (categoryStore.c3Id == "") return;
    // 定义获取spu列表的方法
    getSpuList();
  }
);
// 获取spu列表的方法
const getSpuList = async (pager: number = 1) => {
  // 整理参数
  currentPage.value = pager;
  // 发请求
  let result = await reqSpuList(
    currentPage.value,
    pageSize.value,
    categoryStore.c3Id
  );
  console.log(result);
  spuList.value = result;
};

// 分页器下拉框的选取一页展示几条数据的回调
const sizeChangeHandler = (limit: number) => {
  // 整理参数
  pageSize.value = limit;
  // 再次发请求获取最新数据
  getSpuList();
};

// 点击添加SPU按钮切换到场景一
const addSpu = () => {
  scene.value = 1;
  spuRef.value.initAddSpu(categoryStore.c3Id);
};

// 父子组件通信切换场景(自定义事件)
const changeSceneHandler = ({ scenes, whichOne }) => {
  scene.value = scenes;
  if(whichOne == 'add'){
    getSpuList()
  }else{
    getSpuList(currentPage.value)
  }
};

// 点击修改按钮
const updateSpu = (row) => {
  // 切换到场景一
  scene.value = 1;
  // 调用子组件上的方法(父子组件通信$ref)
  spuRef.value.initSpuList(row);
};

// 点击添加SKU按钮的回调
const addSku = (row)=>{
  // 切换场景为 2
  scene.value =2
  // 使用ref绑定子组件,拿到子组件实例,并调用其方法
  skuRef.value.initSkuData(categoryStore.c1Id,categoryStore.c2Id,row)
}
</script>

<style scoped>
</style>